<template>
	<view class="grid-list">
		<view class="grid-item" v-for="(item,index) in gridList" :key="'grid-item' + index" @click="handleClick(item)">
			<template v-if="index < gridList.length - 1">
				<image class="grid-icon" :src="`${item.iconPath}-${theme}.png`" mode="aspectFit"></image>
				<text class="grid-text">{{item.text}}</text>
			</template>
			<view class="grid-item" v-if="index === gridList.length - 1">
				<!-- #ifdef H5 -->
				<image style="margin-bottom: 10px;" class="grid-icon" :src="`${item.download}-${theme}.png`"
					mode="aspectFit" @click="downLoad"></image>
				<!-- #endif -->
				<image class="grid-icon" :src="`${item.service}-${theme}.png`" mode="aspectFit" @click="getService">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		name: "gridList",
		data() {
			return {
				gridList: [{
						// 充值
						pagePath: '/pages/Mine/wallet/wallet?index=0&isFromHome=1',
						text: 'RCHRG',
						iconPath: '/static/image/Home/RCHRG',
						type: 'page'
					},
					{
						// 提现
						pagePath: '/pages/Mine/wallet/wallet?index=1&isFromHome=1',
						text: 'REL',
						iconPath: '/static/image/Home/REL',
						type: 'page'
					},
					{
						pagePath: '/pages/Mine/wallet/components/allRecord',
						text: 'BILLS',
						iconPath: '/static/image/Home/BILLS',
						type: 'page'
					},
					{
						pagePath: '/pages/Mine/vipSpace/vipSpace',
						text: 'VIP',
						iconPath: '/static/image/Home/VIP',
						type: 'page'
					},
					{
						pagePath: '/pages/tabBar/invite/index',
						text: 'PROMO',
						iconPath: '/static/image/Home/PROMO',
						type: 'tabBar',
						index: 1
					},
					{
						pagePath: '/pages/tabBar/notify/index',
						text: 'ACT',
						iconPath: '/static/image/Home/ACT',
						type: 'tabBar',
						index: 2
					},
					{
						pagePath: '/',
						text: 'REC',
						iconPath: '/static/image/Home/REC',
						type: 'opt-recycle'
					},
					// {
					// 	pagePath: '/',
					// 	text: 'BWV',
					// 	iconPath: '/static/image/Home/BWV'
					// },
					// {
					// 	pagePath: '/',
					// 	text: 'CHAT',
					// 	iconPath: '/static/image/Home/CHAT'
					// } 
					{
						pagePath: '/',
						download: '/static/image/Home/download',
						service: '/static/image/Home/service'
					}
				]
			};
		},
		computed: {
			...mapState({
				theme: state => state.app.theme,
				liveSupport: state => state.app?.homeData?.customer_service?.LiveSupport,
				download_apk: state => state.app?.homeData?.download_apk,
			}),
			...mapGetters('app', ['isLogin']),
		},
		created() {
			console.log('theme104: ', this.theme);
		},
		methods: {
			...mapActions('app', ['getRecycle']),
			...mapMutations('app', ['saveActiveTab']),
			downLoad() {
				if (!this.isLogin) {
					uni.showToast({
						title: this.$t('Page.home.qxdl'),
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/auth/auth?type=0'
						})
					}, 1000)
					return
				}
				this.download_apk && this.$tools.jumpLink(this.download_apk);
				return;
			},
			getService() {
				if (!this.isLogin) {
					uni.showToast({
						title: this.$t('Page.home.qxdl'),
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/auth/auth?type=0'
						})
					}, 1000)
					return
				}
				this.liveSupport && this.$tools.jumpLink(this.liveSupport);
				return;
			},
			handleClick(item) {
				if (!this.isLogin) {
					uni.showToast({
						title: this.$t('Page.home.qxdl'),
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/auth/auth?type=0'
						})
					}, 1000)
					return
				}
				if (item.type === 'tabBar') {
					this.saveActiveTab(item.index)
					uni.setStorageSync('curMenuPagePath', item.pagePath);
					uni.switchTab({
						url: item.pagePath
					})
				} else if (item.type === 'opt-recycle') {
					this.getRecycle()
				} else {
					uni.navigateTo({
						url: item.pagePath
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 默认PC端
	.grid-list {
		width: auto;
		padding: 15px;
		display: flex;
		align-items: center;
		border-radius: 15px;
		background: var(--bg-9);
		box-sizing: border-box;

		.grid-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 80rpx;
			cursor: pointer;

			&:last-child {
				display: flex;
				align-items: center;
				overflow: hidden;
				border-radius: 15px;
				background: var(--bg-53);
				cursor: pointer;
				padding: 4px;
				margin-right: 0;

				.grid-icon {
					width: 30px;
					height: 30px;
				}
			}

			.grid-icon {
				width: 40px;
				height: 40px;
			}

			.grid-text {
				color: var(--color-6);
				font-size: 12px;
				margin-top: 6px;
			}
		}
	}

	// H5
	@media screen and (max-width: 768px) {
		.grid-list {
			width: 100%;
			padding: 15px 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			border-radius: 15px;
			background: var(--bg-9);
			box-sizing: border-box;

			.grid-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 25rpx;
				width: calc((100% - 75rpx) / 4);
				min-width: calc((100% - 75rpx) / 4);
				max-width: calc((100% - 75rpx) / 4);
				margin-bottom: 15px;

				&:last-child {
					padding: 0 10px;
					background: transparent;
				}

				&:nth-child(4n) {
					// 去除最后一列的margin-right
					margin-right: 0 !important;
				}

				// 去除最后一行下边距
				&:nth-child(n+5):nth-child(-n+10) {
					margin-bottom: 0;
				}

				.grid-icon {
					width: 40px;
					height: 40px;
				}

				.grid-text {
					color: var(--color-6);
					font-size: 12px;
					margin-top: 6px;
				}
			}
		}
	}
</style>